<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Furatto :: Forms</title>
<link rel="stylesheet" href="assets/css/normalize.css" />
<link rel="stylesheet" href="assets/css/furatto.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<div class="navbar inverse-navbar navbar-fixed-top navbar-alpha">
  <div class="navbar-inner">
    <div class="container">
      <a href="#menu" class="menu-trigger meteocon" data-meteocon="M"></a>
      <div class="nav-collapse collapse">
        <nav id="menu">
          <ul class="nav">
            <li><a class="brand" href="index.html">Furatto</a></li>
            <li class=""><a href="buttons.html">Buttons</a></li>
            <li class=""><a href="images.html">Images</a></li>
            <li class=""><a href="tables.html">Tables</a></li>
            <li class=""><a href="base.html">Base</a></li>
            <li class=""><a href="grid.html">Grid</a></li>
            <li class="active"><a href="forms.html">Forms</a></li>
            <li class=""><a href="components.html">Components</a></li>
            <li class=""><a href="javascript.html">Javascript</a></li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
</div>

<div class="main-container">
  <div class="row-fluid">
    <div class="span12">
      <div class="furatto-block">
        <div class="furatto-large-header">
          <div class="furatto-large-container">
            <h1 class="large-header">Forms</h1>
            <p class="motto">
            A variety of forms and elements.
            </p>
            <hr/>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="container-center">
    <div class="furatto-block">
      <h3 class="light">Default styles</h3>
      <p>Default form element styles.</p>
      <form action="" method="get" accept-charset="utf-8">
        <label>This is a label</label>
        <input type="text" name="" id="" value="" />
        <label class="checkbox-text"> 
          <input type="checkbox"/>
          Check me out!
        </label>
        <select value="language" class="block" tabindex="1" name="languageslist">
          <option value="0">Choose the language</option>
          <option value="1">Ruby</option>
          <option value="2">Python</option>
          <option value="3">NodeJS</option>
          <option value="4" selected="selected">Objective-C</option>
          <option value="5">Java</option>
        </select>
        <input type="submit" name="" id="" value="Submit" />
      </form>
      <pre data-language="html">
        <code>
           <form action="" method="get" accept-charset="utf-8">
             <label>This is a label</label>
             <input type="text" name="" id="" value="" />
             <label class="checkbox-text"> 
               <input type="checkbox"/>
               Check me out!
             </label>
             <select value="language" class="block" tabindex="1" name="languageslist">
               <option value="0">Choose the language</option>
               <option value="1">Ruby</option>
               <option value="2">Python</option>
               <option value="3">NodeJS</option>
               <option value="4" selected="selected">Objective-C</option>
               <option value="5">Java</option>
             </select>
             <input type="submit" name="" id="" value="Submit" />
           </form>
        </code>
      </pre>
    </div>
    <div class="furatto-block">
      <h3 class="light">Additional layouts</h3>
      <p>Furatto comes with a bunch of additional form layouts for different purposes</p>
      <h4>Inline form</h4>
      <form action="" class="inline-form" method="get" accept-charset="utf-8">
        <input type="text" name="" id="" value="" />
        <input type="submit" class="btn" name="" id="" value="Search" />
      </form>
      <pre data-language="html">
        <code>
          <form action="" class="inline-form" method="get" accept-charset="utf-8">
             <input type="text" name="" id="" value="" />
             <input type="submit" class="btn" name="" id="" value="Search" />
          </form>
        </code>
      </pre>
      <h4>Horizontal form</h4>
      <form action="" class="horizontal-form" method="get" accept-charset="utf-8">
        <div class="furatto-controls">
          <label for="input1">Email: </label>
          <input type="text" name="" id="input1" value="" />
        </div>
        <div class="furatto-controls">
          <label for="input2">Password: </label>
          <input type="text" name="" id="input2" value="" />
        </div>

        <div class="furatto-actions">
          <input type="submit" class="btn" name="" id="" value="Search" />
        </div>
      </form>
      <pre data-language="html">
           <code>
            <form action="" class="horizontal-form" method="get" accept-charset="utf-8">
              <div class="furatto-controls">
                <label for="input1">Email: </label>
                <input type="text" name="" id="input1" value="" />
              </div>
              <div class="furatto-controls">
                <label for="input2">Password: </label>
                <input type="text" name="" id="input2" value="" />
              </div>

              <div class="furatto-actions">
                <input type="submit" class="btn" name="" id="" value="Search" />
              </div>
            </form>
           </code>
      </pre>
      <h4>Login form</h4>
      <form action="" class="login-form centered-form" method="get" accept-charset="utf-8">
        <div class="furatto-login-icon">
          <img src="assets/img/icons/lock-icon128.png" alt="" />
          <h1 class="login-header">Sign in</h1>
        </div>
        <input type="text" name="" id="" value="" placeholder="username" />
        <input type="password" name="" id="" value="" placeholder="password" />
        <input type="submit" name="" id="" value="Let me in!" class="btn btn-block btn-primary btn-large" />
      </form>
      <pre data-language="html">
           <code>
              <form action="" class="login-form centered-form" method="get" accept-charset="utf-8">
                <div class="furatto-login-icon">
                   <img src="assets/img/icons/lock-icon128.png" alt="" />
                   <h1 class="login-header">Sign in</h1>
                </div>
                <input type="text" name="" id="" value="" placeholder="username" />
                <input type="password" name="" id="" value="" placeholder="password" />
                <input type="submit" name="" id="" value="Let me in!" class="btn btn-block btn-primary btn-large" />
              </form>
           </code>
      </pre>
    </div>
    <div class="furatto-block">
      <h3 class="light">Checkboxes and radios</h3>
      <p>Furatto helps you build beautiful checboxes and radio buttons by just adding the data attribute furatto and set it to the input type to style checkbox/radio. It uses the <a href="http://damirfoy.com/iCheck/">iCheck</a> plugin by <a href="https://twitter.com/damirfoy/">@damirfoy</a>.</p>
      <span class="label label-primary">Heads up!</span>
      <p>In order to loose some weight we remove the extra colors and left just the black and blue skins. But don't worry you can add more colors, just follow the recipe steps on the wiki.</p>
      <p>
      The color scheme for the checkboxes are:
      <ul class="color-list">
        <li class="black"></li>
        <li class="blue" data-toggle="tooltip" data-placement="top" title="blue"></li>
      </ul>
      </p>
      <div class="row-fluid">
        <div class="span12">
          <div class="span6">
            <ul class="unstyled">
              <li>
              <input type="checkbox" id="checkbox1" data-furatto='checkbox'>
              <label for="checkbox1" class="checkbox-label">Checkbox 1</label>
              </li>
              <li>
              <input type="checkbox" id="checkbox2" checked data-furatto='checkbox' data-color="blue">
              <label for="checkbox2" class="checkbox-label">Checkbox 2</label>
              </li>
              <li>
              <input type="checkbox" id="checkbox3" disabled data-furatto='checkbox'>
              <label for="checkbox3" class="checkbox-label">Disabled</label>
              </li>
              <li>
              <input type="checkbox" id="checkbox4" checked disabled data-furatto='checkbox' data-color"blue">
              <label for="checkbox4" class="checkbox-label">Disabled and checked</label>
              </li>
            </ul>
          </div>
          <div class="span6">
            <ul class="unstyled">
              <li>
              <input type="radio" name="iCheck" id="radiobutton1" data-furatto='radio'>
              <label for="radiobutton1" class="radiobutton-label">Radiobutton 1</label>
              </li>
              <li>
              <input type="radio" name="iCheck" checked id="radiobutton2" data-furatto='radio' data-color="blue">
              <label for="radiobutton2" class="radiobutton-label">Radiobutton 2</label>
              </li>
              <li>
              <input type="radio" disabled id="radiobutton3" data-furatto='radio'>
              <label for="radiobutton3" class="radiobutton-label">Disabled</label>
              </li>
              <li>
              <input type="radio" checked disabled id="radiobutton4" data-furatto='radio' data-color="blue">
              <label for="radiobutton4" class="radiobutton-label">Disabled and checked</label>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <pre data-language="html">
         <code>
            &lt;input type="checkbox" id="checkbox2" checked data-furatto='checkbox'&gt;
            &lt;label for="checkbox2" class="checkbox-label inline"&gt;Checkbox 2&lt;/label&gt;

            &lt;input type="radio" name="iCheck" id="radiobutton1" data-furatto='radio' data-color="blue"&gt;
            &lt;label for="radiobutton1" class="radiobutton-label inline"&gt;Radiobutton 1&lt;/label&gt;
        </code>
      </pre>
    </div>
    <div class="furatto-block">
      <h3 class="light">Selects</h3>
      <p>Furatto comes with beautiful select elements, and makes it really easy to integrate.</p>
      <select value="language" class="" tabindex="1" name="languageslist" data-furatto='select'>
        <option value="0">Choose the language</option>
        <option value="1">Ruby</option>
        <option value="2">Python</option>
        <option value="3">NodeJS</option>
        <option value="4" selected="selected">Objective-C</option>
        <option value="5">Java</option>
      </select>
      <pre data-language="html">
         <code>
           &lt;select value="language" class="" tabindex="1" name="languageslist" data-furatto='select'>
             <option value="0">Choose the language</option>
             <option value="1">Ruby</option>
             <option value="2">Python</option>
             <option value="3">NodeJS</option>
             <option value="4" selected="selected">Objective-C</option>
             <option value="5">Java</option>
           &lt;/select>
         </code>
      </pre>
    </div>
    <div class="furatto-block">
      <h3 class="light">Uneditable inputs</h3>
      <p>For disableing and input or make it not editable just add the disabled attribute.</p>
      <input type="text"  disabled placeholder="I'm disabled"/>
      <pre data-language="html">
           <code>
              <input type="text"  disabled placeholder="I'm disabled"/>
            </code>
      </pre>
    </div>
    <div class="furatto-block">
      <h3 class="light">Validation states</h3>
      <p>Furatto includes several input states to use them in the right cases.</p>
      <div class="success">
        <label for="">Success!</label>
        <input type="text" />
        <span class="help-hint">This is correct</span>
      </div>
      <div class="info">
        <label for="">Info!</label>
        <input type="text" />
        <span class="help-hint">Hi there!</span>
      </div>
      <div class="warning">
        <label for="">Warning!</label>
        <input type="text" />
        <span class="help-hint">Username is taken</span>
      </div>
      <div class="error">
        <label for="">Error!</label>
        <input type="text" />
        <span class="help-hint">The email is bad formatted</span>
      </div>
      <pre data-language="html">
         <code>
          <div class="success">
             <label for="">Success!</label>
             <input type="text" />
             <span class="help-hint">This is correct</span>
           </div>
           <div class="info">
             <label for="">Info!</label>
             <input type="text" />
             <span class="help-hint">Hi there!</span>
           </div>
           <div class="warning">
             <label for="">Warning!</label>
             <input type="text" />
             <span class="help-hint">Username is taken</span>
           </div>
           <div class="error">
             <label for="">Error!</label>
             <input type="text" />
             <span class="help-hint">The email is bad formatted</span>
           </div>
        </code>
      </pre>
    </div>
  </div>
</div>


<div class="footer">
  <div class="footer-wrapper">
    <div class="container">
      <div class="row-fluid">
        <div class="span12">
          <div class="span6">
            <p class="copyright">Code licensed under <a href="http://www.apache.org/licenses/LICENSE-2.0" target="_blank" class="link">Apache License v2.0</a></p>
          </div>
          <div class="span6">
            <ul class="hrz-nav pull-right">
              <li><a href="index.html">Home</a></li>
              <li><a href="assets/furatto.zip">Download</a></li>
              <li><a href="https://github.com/IcaliaLabs/furatto-rails">Rails</a></li>
              <li><a href="https://github.com/IcaliaLabs/furatto" target="_blank">Github</a></li>
            </ul>
          </div>
        </div>      
      </div>
    </div>
  </div>
</div>

  <script>
    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
    (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
    m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
    })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

    ga('create', 'UA-32608013-3', 'icalialabs.github.io');
    ga('send', 'pageview');

  </script>

<script src="assets/js/jquery.js"></script>
<script src="assets/js/jpanel.js"></script>
<script src="assets/js/jquery.dropkick-1.0.0.js"></script>
<script src="assets/js/jquery.icheck.js"></script>
<script src="assets/js/rainbow-custom.min.js"></script>
<script src="assets/js/tooltip.js"></script>
<script src="assets/js/jquery.tagsinput.js"></script>
<script src="assets/js/picker.js"></script>
<script src="assets/js/picker.date.js"></script>
<script src="assets/js/picker.time.js"></script>
<script src="assets/js/legacy.js"></script>
<script src="assets/js/jquery.toolbar.js"></script>
<script src="assets/js/jquery.avgrund.js"></script>
<script src="assets/js/responsiveslides.js"></script>
<script src="assets/js/responsive-tables.js"></script>
<script src="assets/js/dropdown.js"></script>
<script src="assets/js/manifest.js"></script>

</body>
</html>
